<template>
  <view class="container">
    <view class="main">
      <view class="main_title">
        填写提现信息
      </view>
      <view class="main_box">
        <uv-form labelPosition="left" :model="fromState" labelWidth="80">
          <uv-form-item label="姓名：" prop="fromState.name" borderBottom>
            <uv-input v-model="fromState.name" border="none" placeholder="请输入">
            </uv-input>
          </uv-form-item>
          <uv-form-item label="微信号：" prop="fromState.watchNo" borderBottom>
            <uv-input v-model="fromState.name" border="none" placeholder="请输入">
            </uv-input>
          </uv-form-item>
          <uv-form-item label="提现金额：" prop="fromState.price" borderBottom>
            <uv-input v-model="fromState.name" border="none" placeholder="请输入">
            </uv-input>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <view class="main_btn flex-center" @click="ok">提现</view>
    <uv-modal ref="modalRef" title="提示" :confirmColor="'#666666'" confirmText="关闭" :width="'480rpx'">
      <template #default>
        <view class="modal_box">
          提现成功，请等待后台管理员审核！
        </view>
      </template>
    </uv-modal>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  const fromState = reactive({
    name: '',
    watchNo: '',
    price: ''
  })
  const modalRef = ref()
  const closeModal = () => {
    modalRef.value.close()
  }
  const withdrawal = () => {
    modalRef.value.open()
  }
  const ok = () => {
    withdrawal()
  }
</script>

<style lang="less" scoped>
  .container {
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
    padding-top: 20rpx;

    .main {
      width: 750rpx;
      height: 387rpx;
      background: #FFFFFF;
      margin: 0 0 60rpx;
      padding: 40rpx 30rpx 30rpx;
      box-sizing: border-box;

      &_title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        margin-bottom: 29rpx;
      }

      :deep(.uv-form-item__body__left__content__label) {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }

      :deep(.uv-form-item) {

        &:last-child {
          .uv-line {
            display: none;
          }
        }
      }
    }

    .main_btn {
      margin-left: 95rpx;
      width: 560rpx;
      height: 68rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }

    .modal_box {
      font-size: 28rpx;
      color: #333333;
      white-space: nowrap;
    }

    :deep(.uv-modal__content) {
      padding: 25rpx;
    }

    :deep(.uv-modal__title) {
      padding-top: 35rpx;
    }
  }
</style>